<template>
  <el-main>
    <el-card
      shadow="never"
      header="分步表单"
    >
      <el-steps
        :active="active"
        align-center
        style="margin-bottom: 20px"
      >
        <el-step title="填写转账信息" />
        <el-step title="确认转账信息" />
        <el-step title="完成" />
      </el-steps>
      <el-row>
        <el-col :lg="{ span: 8, offset: 8 }">
          <el-form
            v-if="active == 0"
            ref="stepForm_0"
            :model="form"
            :rules="rules"
            label-position="top"
          >
            <el-form-item
              label="付款账户"
              prop="paymentAccount"
            >
              <el-select
                v-model="form.paymentAccount"
                clearable
              >
                <el-option
                  label="sakuya@scui.com"
                  value="sakuya@scui.com"
                />
                <el-option
                  label="lolicode@scui.com"
                  value="lolicode@scui.com"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="收款账户"
              prop="collectionAccount"
            >
              <el-input
                v-model="form.collectionAccount"
                clearable
              />
            </el-form-item>
            <el-form-item
              label="收款人姓名"
              prop="collectionName"
            >
              <el-input
                v-model="form.collectionName"
                clearable
              />
            </el-form-item>
            <el-form-item
              label="转账金额"
              prop="amount"
            >
              <el-input v-model="form.amount" />
            </el-form-item>
          </el-form>
          <el-form
            v-if="active == 1"
            ref="stepForm_1"
            :model="form"
            :rules="rules"
            label-position="top"
          >
            <el-alert
              title="确认转账后，资金将直接打入对方账户，无法退回。"
              type="warning"
              show-icon
              style="margin-bottom: 15px"
            />
            <el-descriptions
              :column="1"
              border
            >
              <el-descriptions-item label="付款账户">
                {{ form.paymentAccount }}
              </el-descriptions-item>
              <el-descriptions-item label="收款账户">
                {{ form.collectionAccount }}
              </el-descriptions-item>
              <el-descriptions-item label="收款人姓名">
                {{ form.collectionName }}
              </el-descriptions-item>
              <el-descriptions-item label="转账金额">
                {{ form.amount }} 元
              </el-descriptions-item>
            </el-descriptions>
            <el-divider />
            <el-form-item
              label="支付密码"
              prop="payPassword"
            >
              <el-input
                v-model="form.payPassword"
                show-password
                placeholder="请输入"
              />
            </el-form-item>
          </el-form>
          <div v-if="active == 2">
            <el-result
              icon="success"
              title="操作成功"
              sub-title="预计两小时内到账"
            >
              <template #extra>
                <el-button
                  type="primary"
                  @click="again"
                >
                  再转一笔
                </el-button>
                <el-button>查看账单</el-button>
              </template>
            </el-result>
          </div>
          <el-button
            v-if="active > 0 && active < 2"
            :disabled="submitLoading"
            @click="pre"
          >
            上一步
          </el-button>
          <el-button
            v-if="active < 1"
            type="primary"
            @click="next"
          >
            下一步
          </el-button>
          <el-button
            v-if="active == 1"
            type="primary"
            :loading="submitLoading"
            @click="submit"
          >
            提交
          </el-button>
        </el-col>
      </el-row>
    </el-card>
  </el-main>
</template>

<script>
export default {
  name: "Stepform",
  data() {
    return {
      active: 0,
      submitLoading: false,
      form: {
        paymentAccount: "lolicode@scui.com",
        collectionAccount: "test@example.com",
        collectionName: "Lolowan",
        amount: "100",
        payPassword: "",
      },
      rules: {
        paymentAccount: [
          {
            required: true,
            message: "请选择付款账户",
          },
        ],
        collectionAccount: [
          {
            required: true,
            message: "请输入收款账户",
          },
        ],
        collectionName: [
          {
            required: true,
            message: "请输入收款人姓名",
          },
        ],
        amount: [
          {
            required: true,
            message: "请输入转账金额",
          },
        ],
        payPassword: [
          {
            required: true,
            message: "需要支付密码才能进行支付",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    //下一步
    next() {
      const formName = `stepForm_${this.active}`;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.active += 1;
        } else {
          return false;
        }
      });
    },
    //上一步
    pre() {
      this.active -= 1;
    },
    //提交
    submit() {
      const formName = `stepForm_${this.active}`;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          setTimeout(() => {
            this.submitLoading = false;
            this.active += 1;
          }, 1000);
        } else {
          return false;
        }
      });
    },
    //再来一次
    again() {
      this.active = 0;
    },
  },
};
</script>

<style scoped>
.el-steps:deep(.is-finish) .el-step__line {
  background: var(--el-color-primary);
}
</style>
